<template>
  <div class="left_box">
    <div class="tree_title">
      <div class="title">模型分类</div>
    </div>
    <div class="menu-box">
      <div
        class="menu-item"
        :class="{ select: item.id == active }"
        v-for="(item, i) in modelGather"
        :key="i"
        @click="handleMenuClick(item)"
      >
        <img v-if="/^https/.test(item.icon)" :src="item.icon" alt="" class="menu-item-icon">
        <div v-else v-html="item.icon" class="menu-item-icon"></div>
        <span class="menu-item-title">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

import modelGather from './ai-config'

const emit = defineEmits(['change'])
const active = ref(null)

const handleMenuClick = (data) => {
  if( data.id === active.value ) return
  
  active.value = data.id
  emit('change', data.id)
}

onMounted(()=>{
  handleMenuClick(modelGather[0])
})
</script>

<style lang="scss" scoped>
.menu-box {
  padding-top: 20px;
  height: calc(100% - 50px);
  overflow-y: auto;
}
.menu-item {
  margin-bottom: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  &-title {
    font-size: 16px;
    margin-left: 10px;
  }
  &-icon {
    width: 20px;
    height: 20px;
  }
  &.select {
    font-weight: 600;
  }
}
</style>
